<template>
  <n-button-group>
    <n-button @click="activate('left')"> 更多 </n-button>
  </n-button-group>

  <n-drawer v-model:show="active" :width="502" :placement="placement">
    <n-drawer-content title="考勤情况">
      <div style="display: flex">
        <QuerySelect name="days" label="时间" :options="daysOptions" style="margin: 1rem" />
      </div>

      <n-list style="display: flex">
        <n-thing title="ID" style="margin-left: 1rem">
          <n-list-item v-for="attend in Attends.attendes" :key="attend.id">
            <p>{{ attend.id }}</p>
          </n-list-item>
        </n-thing>
        <n-thing title="上班时间" style="margin-left: 1rem">
          <n-list-item v-for="attend in Attends.attendes" :key="attend.id">
            <p> {{ format(new Date(attend.startWork), 'yyyy-MM-dd HH:mm:ss') }}</p>
          </n-list-item>
        </n-thing>
        <n-thing title="下班时间" style="margin-left: 1rem">
          <n-list-item v-for="attend in Attends.attendes" :key="attend.id">
            <p> {{ format(new Date(attend.offDuty), 'yyyy-MM-dd HH:mm:ss') }}</p>
          </n-list-item>
        </n-thing>
      </n-list>
    </n-drawer-content>
  </n-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import type { DrawerPlacement } from 'naive-ui';
  //查询考勤情况
  import { format } from 'date-fns';
  import { AttendanceStore } from '@/store/modules/attend';
  import QuerySelect from '@/views/dashboard/workplace/QuerySelect.vue';

  const active = ref(false);
  const placement = ref<DrawerPlacement>('right');
  const activate = (place: DrawerPlacement) => {
    active.value = true;
    placement.value = place;
  };

  const Attends = AttendanceStore();
  Attends.search();

  const daysOptions = [
    { label: '7天内', value: '7' },
    { label: '两周内', value: '14' },
    { label: '一个月内', value: '30' },
    { label: '三个月内', value: '90' },
    { label: '半年内', value: '180' },
  ];
</script>
